
<template>
    <el-dialog v-model="isShow" width="50%" :title="editData ? '编辑' + title : '增加' + title" :before-close="handleClose">
        <el-form :model="formData">
            {{ formData }}
            <el-form-item label="Activity name">
                <el-input v-model="formData.name" />
            </el-form-item>

            <el-form-item label="Activity city">
                <el-input v-model="formData.city" />
        
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue"

/* --------------------------------- */
import { toRefs } from 'vue'
const props = defineProps({
    editData: Object,
    title: String
})

const { editData } = toRefs(props)
const { title } = toRefs(props)

/* --------------------------------- */
let isShow = ref(false)

const changeIsShow = async () => {
    isShow.value = true
}

defineExpose({
    isShow,
    changeIsShow
})

const handleClose = (done: () => void) => {
    done()
}
/* --------------------------------- */

let formData = ref()
watch(
    () => props.editData,
    () => {
        if (props.editData) {
            formData.value = props.editData;
        } else {
            formData.value = {}
        }
    },
    { deep: true }
);
/* --------------------------------- */
</script>

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
